{% extends "base.html" %}

{% block content %}
<div class="attributes-container">
    <table>
        <thead>
            <tr>
                <th>商品编号</th>
                <th>商品名称</th>
                <th>商品单价</th>
                <th>供应商编号</th>
                <th>商品简介</th>
                <th>备注</th>
            </tr>
        </thead>
        <tbody id="product-table-body">
        </tbody>
    </table>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        fetch('/api/products')
            .then(response => response.json())
            .then(data => {
                const tableBody = document.getElementById('product-table-body');
                tableBody.innerHTML = '';
                data.forEach(product => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${product.商品编号}</td>
                        <td>${product.商品名称}</td>
                        <td>${product.商品单价}</td>
                        <td>${product.供应商编号}</td>
                        <td>${product.商品简介}</td>
                        <td>${product.备注}</td>
                    `;
                    tableBody.appendChild(row);
                });
            }).catch(error => {
                console.error('Error:', error);
            });
    });
</script>
{% endblock %}
